<template>
	<view class="order-datail">
		<HeaderTitle :title="$t('OrderDtadail')" :bottom="true" :lang="false" :mobile="true" :combakflag="true">
		</HeaderTitle>
		<view class="order-content" :dir="i18nLocale=='ug'?'rtl':'ltr'" v-if="itemList.address">
			<view class="order-title ">{{itemList.address.name}}</view>
			<view class="time">
				<text>{{$t('TimePlaced')}}:</text>
				<text dir="ltr">{{itemList.paid_at}}</text>
				<u-icon name="shopping-cart-fill" color="#45bc1b" size="25" v-if="itemList.status==0"></u-icon>
				<u-icon name="bag-fill" color="#45bc1b" size="25" v-else-if="itemList.status==1"></u-icon>
				<u-icon name="car-fill" color="#45bc1b" size="25" v-else-if="itemList.status==2"></u-icon>
				<u-icon name="checkmark-circle-fill" color="#45bc1b" size="25" v-else></u-icon>
			</view>
			<view class="title">
				<text style="width:15rpx;height:40rpx;border-radius: 20rpx;background-color:#45bc1b ;"></text>
				<view class="title-content">{{$t('CustomerServiceInformation')}}</view>
			</view>
			<view class="user-box box-item">
				<view class="address ">
					<text>{{$t('UserName')}}:</text>
					<text class="adddres-text">{{itemList.address.name}}</text>
				</view>
				<view class="address ">
					<text>{{$t('UserPone')}}:</text>
					<view class="" style="display: flex;align-items: center;">
						<text class="adddres-text">{{itemList.address.mobile}}</text>
						<view class="pone-item button " @click="changeMobile(String(itemList.address.mobile))">
							<u-icon name="phone-fill" color="#45BC1B" size="22"></u-icon>
							<text>{{$t('Phone')}}</text>
						</view>
					</view>
				</view>
				<view class="address ">
					<text>{{$t('ShippingAddress')}}:</text>
					<text class="adddres-text">{{itemList.address.detail}}</text>
				</view>
				<view class="navgtion">
					<view class="">{{$t('OpenMap')}}</view>
					<view class="button">
						<Navgtion :location="itemList.address.location" :name="itemList.address.name" :address="itemList.address.detail"></Navgtion>
					</view>
				</view>
				<view class="time">
					{{$t('CustomerTime')}}：<view dir="ltr">{{itemList.arrived_at}}</view>
				</view>
			</view>
			<view class="title">
				<text style="width:15rpx;height:40rpx;border-radius: 20rpx;background-color:#45bc1b ;"></text>
				<view class="title-content">{{$t('SopInfo')}}</view>
			</view>
			<view class="shops-content box-item" v-for="big_item in itemList.items">
				<!-- 	<view class="logo-box">
				<image :src="getImgSrc(big_item.shop.logo)" mode=""></image>
			</view> -->
				<view class="address ">
					<text>{{$t('ShopNmae')}}:</text>
					<text class="adddres-text">{{i18nLocale=='ug'?big_item.shop.ug_name:big_item.shop.cn_name}}</text>
				</view>
				<view class="address ">
					<text>{{$t('UserPone')}}:</text>
					<view class="" style="display: flex;align-items: center;">
						<text class="adddres-text">{{big_item.shop.mobile}}</text>
						<view class="pone-item button " @click="changeMobile(String(big_item.shop.mobile))">
							<u-icon name="phone-fill" color="#45BC1B" size="22"></u-icon>
							<text>{{$t('Phone')}}</text>
						</view>
					</view>
				</view>
				<view class="address ">
					<text>{{$t('ShopAddress')}}:</text>
					<text
						class="adddres-text">{{i18nLocale=='ug'?big_item.shop.ug_address:big_item.shop.cn_address}}</text>
				</view>
				<view class="navgtion">
					<view class="">{{$t('OpenMap')}}</view>
					<view class="button">
						<Navgtion :location="big_item.shop.location" :name="i18nLocale=='ug'?big_item.shop.ug_name:big_item.shop.cn_name" :address="i18nLocale=='ug'?big_item.shop.ug_address:big_item.shop.cn_address"></Navgtion>
					</view>
				</view>
				<view class="time">
					{{$t('SatiusTime')}}：<view dir="ltr">{{big_item.shop.work_time}}</view>
				</view>
				<view class="product">
					<view class="product-item" v-for="(sub_item,sub_index) in big_item.content">
						<view class="left">
							<image :src="getImgSrc(sub_item.img)" class="img"></image>
							<view class="shop-content">
								<view class="name">{{ i18nLocale=='ug'?sub_item.ug_name:sub_item.cn_name }}</view>
								<view class="qut"> <text class="x-text">X</text> <text>{{sub_item.qty}}</text>
								</view>
							</view>
						</view>
						<view class="right">
							￥{{sub_item.price}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getorderone
	} from '@/api/all.js';
	import Navgtion from "./h5navgtion.vue"
	export default {
		components: {
			Navgtion
		},
		data() {
			return {
				itemList: [],
				shopsList: []
			};
		},
		onLoad(e) {
			if (e.id) {
				this.getorderOne(e.id);
			}
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
		},
		methods: {
			getorderOne(id) {
				let that = this;
				getorderone({
					id: id
				}).then((res) => {
					if (res.code == 200) {
						let data = res.body.data;
						that.itemList = data;
						console.log(data,'++++++')
						// that.shopsList = data.items.reduce((acc, curr) => {
						// 	const foundItem = acc.find(item => item.shop.id === curr.shop_id); // 查找已存在的店铺项
						// 	if (foundItem) {
						// 		foundItem.item.push(curr);
						// 	} else {
						// 		acc.push({
						// 			shop: curr.shop,
						// 			item: [curr]
						// 		}); // 创建新的店铺项，并添加当前产品到item数组中
						// 	}
						// 	return acc;
						// }, []);
					}
					// console.log(that.shopsList, '++++++')
				})
			},
			changeMobile(mobile) {
				uni.makePhoneCall({
					phoneNumber: mobile
				})

			},

		}

	}
</script>

<style lang="scss" scoped>
	.order-datail {
		width: 100%;

		.order-content {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 20rpx;

			.order-title {
				text-align: center;
				padding: 10rpx 0rpx;
			}

			.time {
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				color: #000;

				text {
					color: #808080;
				}

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.address {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10rpx 0rpx;

				.adddres-text {
					padding: 0rpx 10rpx;
					color: $uni-color-topic;
				}
			}

			.navgtion {
				display: flex;
				justify-content: space-between;
				align-items: center;

			}
		}

		.shops-content {
			width: 100%;

			.logo-box {
				width: 100%;
				display: flex;
				justify-content: center;

				image {
					width: 200rpx;
					height: 200rpx;
				}
			}

			.product-item {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 15rpx;
				
				.left {
					display: flex;
					align-items: center;
				
					image {
						width: 120rpx;
						height: 100rpx;
						border-radius: $uni-border-radius-sm;
					}
				
					.shop-content {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding: 0rpx 20rpx;
				
						.name {
							font-weight: bold;
							padding: 10rpx 0rpx;
						}
				
						.qut {
							font-size: $uni-font-size-base;
							color: $uni-text-color-grey;
				
							.x-text {
								font-size: $uni-font-size-sm0;
								padding-right: 3rpx;
							}
						}
					}
				
				}
				
				.right {
					display: flex;
					align-items: center;
					color: $uni-color-topic;
				}
			}

		}


		.box-item {
			width: 100%;
			box-sizing: border-box;
			padding: $uni-spacing-padding-sm;
			border-radius: $uni-border-radius-lg;
			background-color: $uni-bg-color-box;
			margin-bottom: 20rpx;
			box-shadow: $uni-bg-shadow;
		}

		.title {
			display: flex;
			align-items: center;
			margin: 10rpx 0rpx;

			.title-content {
				padding: 0rpx 20rpx;
			}
		}

		.pone-item {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: $uni-font-size-lg;

			text {
				padding: 0rpx 10rpx;
				color: $uni-color-topic;
			}
		}

		.button {
			padding: 7rpx 20rpx;
			border-radius: 30rpx;
			background-color: $uni-color-parbg;
			border: 1rpx solid $uni-color-topic;
			font-size: $uni-font-size-lg;
		}
	}
</style>